<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>index</title>
        <style type="text/css">
        
        .stress{
            border:2px  solid  green;
            font-size:20px;/*设置文字字号*/
            color:blue;/*设置文字颜色*/
            font-weight:bold;/*设置字体加粗*/
            background:pink;
            border:1px solid #000;
        }
        span{font-weight:bold;
            color:blue;
            font-family:"隶书";
            font-size:30px;
            text-decoration:underline;}
        body{font-family:"微软雅黑";}
        p{text-indent:2em;
            line-height:2em;}
        div{text-align:center;
            margin:10px; }
</style>
</style>
    </head>
    <body>
        <h1>鸣人VS佩恩</h1>
        <h2>鸣人修行归来</h2>
        <h3>仙人模式开启</h3>
        <p style= "color:red; font-size:20px"><span>第一段</span>   没有什么内容没有什么内容没有什么内容没有
            什么内容没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容
            没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容
            没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容</p>
        <p><span>第二段</span>    依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容
            依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容
            依然没有什么内容依然没有什么内容依然没有什么内容</p>
           
         <p><a style= "color:red"href="http://ife.baidu.com/" title="百度前端">百度前端</a></p>
        
        <img src="http://img3.100bt.com/upload/ttq/20140413/1397366089044_middle.jpg"title="随便插入的风景"/> 


        <hr/>

        <h2>鸣人一穿五打倒佩恩，舌战长门</h2>
        <p><span>第一段</span>   没有什么内容没有什么内容没有什么内容没有
            什么内容没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容
            没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容
            没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容没有什么内容</p>
        <p><span>第二段</span>    依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容
            依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容依然没有什么内容
            依然没有什么内容依然没有什么内容依然没有什么内容</p>
        </p>

        <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201511/19233112twlrzux0.jpg"title="随便插入的风景"/> 


        <h2>图片欣赏</h2>
        <div><img src="http://i2.hdslb.com/video/1b/1bff11dd362aec39a242fe122c29595b.jpg"title="图1"/></div>
        <div><br/><img src="http://i2.hdslb.com/video/1b/1bff11dd362aec39a242fe122c29595b.jpg"title="图2"/></div>
        <div><br/><img src="http://i2.hdslb.com/video/1b/1bff11dd362aec39a242fe122c29595b.jpg"title="图3"/></div>
        <div><br/><img src="http://i2.hdslb.com/video/1b/1bff11dd362aec39a242fe122c29595b.jpg"title="图4"/></div>

        <hr/>

        <table class="stress">
            <caption>标题</caption>
            <tbody>
                <tr>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                </tr>
                <tr>
                    <th>1.1</th>
                    <th>1.2</th>
                    <th>1.3</th>
                </tr>

                <tr>
                    <th>2.1</th>
                    <th>2.2</th>
                    <th>2.3</th>
                </tr>

        </table>

        <h2>这是一个侧栏</h2>
         <form style="padding-left:400px;">
             <label>
                <table>
                    <tr>
                        <td> <label for="email">输入你的邮箱地址</label></td>
                        <td> <input type="email" id="email" placeholder="Enter email"></td>
                    </tr>
                    <tr>
                        <td> <label for="email">请输入密码</label></td>
                        <td> <input type="password" id="password" placeholder="Enter password"></td>
                    </tr>
                    <tr>
                        <td> <label for="email">请再次输入密码</label></td>
                        <td> <input type="password" id="password" placeholder="Enter password"></td>
                    </tr>
                    <tr>
                        <td><label>性别:</label></td>
                        <td><label>男</label>
                            <input type="radio" value="1"  name="gender-man" />
                            <label>女</label>
                            <input type="radio" value="2"  name="gender-woman" /></td>
                    </tr>

                    <tr>
                        <td><label>城市:</label></td>
                        <td> <select>
                                <option value="南京">南京</option>
                                <option value="常州">常州</option>
                                <option value="苏州">苏州</option>
                                <option value="北京">北京</option>
                                </select></td>
                    </tr>
                    <tr>
                        <td><label>爱好</label></td>
                        <td><input type="checkbox" value="read" name="hobby">读书
                            <input type="checkbox" value="sport" name="hobby">运动
                            <input type="checkbox" value="movie" name="hobby">电影
                        </td>
                    </tr>
                    <tr>
                        <td >个人描述</td>
                        <td>
                            <textarea name="describe" rows="8" cols="80" placeholder="这是一个多行输入框，输入您个人的描述"></textarea>
                        </td>
                    </tr>
                </table>
             </label>
         </form>
    </body>
</html>